<template>
  <div class="app-container">
    <!-- 搜索 -->
    <div id="" class="header">
      <div id="" class="title_search">
        <el-input
          :clearable="true"
          class="search_input"
          v-model="title"
          placeholder="搜索关键字"
        ></el-input>
      </div>

      <div class="block">
        <el-date-picker
          :clearable="true"
          class="search_time"
          prefix-icon="1"
          v-model="time"
          type="datetimerange"
          :picker-options="pickerOptions"
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          align="right"
          format="yyyy-MM-dd HH:mm"
          value-format="yyyy-MM-dd HH:mm:ss"
          :default-time="['00:00:00', '23:59:59']"
        >
        </el-date-picker>
      </div>
      <el-select
        @change="select_change"
        v-model="select_label"
        placeholder="请选择"
        style="width: 150px"
      >
        <el-option
          v-for="item in options"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        >
        </el-option>
      </el-select>
      <el-button type="primary" icon="el-icon-search" @click="search"
        >搜索</el-button
      >
      <el-button type="primary" icon="el-icon-refresh-right" @click="refresh"
        >刷新</el-button
      >
      <!-- <el-button type="primary" icon="el-icon-plus" @click="handleAddRole"
        >添加</el-button
      > -->
    </div>
    <!-- 搜索 -->
    <!-- 表格 -->
    <el-table
      :data="rolesList"
      style="width: 100%; margin-top: 30px"
      border
      v-loading="table_loading"
    >
      <el-table-column align="center" label="id" width="80" prop="id">
      </el-table-column>
      <el-table-column
        align="center"
        label="公司名称"
        width=""
        prop="company_name"
      >
      </el-table-column>
      <el-table-column align="center" label="发票金额" width="100" prop="price">
      </el-table-column>
      <el-table-column
        align="center"
        label="发票编号"
        width=""
        prop="invoice_num"
      >
      </el-table-column>

      <el-table-column
        align="center"
        label="开票时间"
        width="140"
        prop="invoice_time_str"
      >
      </el-table-column>
      <el-table-column
        align="center"
        label="是否挂接"
        width="150"

      >
      <template slot-scope='scope'>
        <div id="" @click="tiao(scope.row.statement_id)">
          {{scope.row.statement_id_str}}
        </div>
      </template>
      </el-table-column>
      <el-table-column
        align="center"
        label="创建人"
        width="150"
        prop="uid_str"
      >
      </el-table-column>
      <el-table-column align="center" label="备注" width="" prop="remark">
      </el-table-column>
      <el-table-column align="center" width="130" label="操作">
        <template slot-scope="scope">
          <div id="cao_zuo" class="cao_zuo">
            <el-tooltip
              class="item"
              effect="dark"
              content="编辑"
              placement="top-start"
            >
              <el-button
                type="success"
                size="mini"
                icon="el-icon-edit"
                @click="handleEdit(scope)"
              ></el-button>
            </el-tooltip>
            <el-tooltip
              class="item"
              effect="dark"
              content="作废"
              placement="top-start"
            >
              <el-button
                type="danger"
                size="mini"
                icon="el-icon-delete"
                class="del"
                @click="handleDelete(scope)"
              >
              </el-button>
            </el-tooltip>
          </div>
        </template>
      </el-table-column>
    </el-table>
    <!-- 表格 -->

    <!-- 翻页组件 -->
    <div id="" class="pages">
      <el-pagination
        @size-change="size_change"
        background
        @current-change="current_change"
        :current-page="page"
        :page-sizes="[10, 20, 30, 40]"
        :page-size="10"
        layout="total, sizes, prev, pager, next, jumper"
        :total="count"
      >
      </el-pagination>
    </div>
    <!-- 翻页组件 -->

    <el-dialog
    v-dialogDrag
      :visible.sync="dialogVisible"
      center
      :title="dialogType === 'edit' ? '编辑' : '新建'"
    >
      <el-form ref="role" :rules="rules" :model="role" label-width="100px">
        <el-form-item label="公司名称" prop="company_name">
          <el-input v-model="role.company_name" placeholder="" />
        </el-form-item>
        <el-form-item label="发票金额" prop="price">
          <el-input type="number" v-model="role.price" placeholder="" />
        </el-form-item>
        <el-form-item label="发票编号" prop="invoice_num">
          <el-input v-model="role.invoice_num" placeholder="" />
        </el-form-item>
        <el-form-item
          label="结算单id"
          v-show="dialogType === 'new' ? false : true"
        >
          <el-input v-model="role.statement_id" placeholder="" />
        </el-form-item>
        <el-form-item label="开票时间" prop="invoice_time_str">
          <el-date-picker
            v-model="role.invoice_time_str"
            value-format="yyyy-MM-dd HH:mm"
            format="yyyy-MM-dd HH:mm"
            type="datetime"
            placeholder="选择日期时间"
            @focus="time_focus"
          >
          </el-date-picker>
        </el-form-item>
        <el-form-item label="纳税人识别号">
          <el-input class="na_shui" v-model="role.company_num" placeholder="" />
        </el-form-item>
        <el-form-item label="公司电话">
          <el-input type="number" v-model="role.company_tel" placeholder="" />
        </el-form-item>
        <el-form-item label="负责人">
           <el-select
              clearable
              v-model="fuze_name"
              filterable
              placeholder="搜索负责人"
              @focus="focus"
              @change="change"
              >
              <el-option
                v-for="item in options1"
                :key="item.value"
                :label="item.real_name"
                :value="item.uid">
              </el-option>
            </el-select>
        </el-form-item>
        <el-form-item label="公司地址">
          <el-input v-model="role.company_addr" placeholder="" />
        </el-form-item>
        <el-form-item label="发票类型">
          <el-input v-model="role.invoice_type" placeholder="" />
        </el-form-item>
        <el-form-item label="备注">
          <el-input
            v-model="role.remark"
            placeholder=""
            type="textarea"
            :rows="3"
          />
        </el-form-item>
      </el-form>
      <div style="text-align: center; margin-bottom: 20px">
        <el-button @click="dialogVisible = false">取消</el-button>
        <el-tooltip
          class="item"
          effect="dark"
          content="请仔细检查填写内容"
          placement="top-end"
        >
          <el-button
            type="primary"
            :loading="fullscreenLoading"
            @click="confirmRole"
            >提交</el-button
          >
        </el-tooltip>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import {
  fa_piao_luru,
  fa_piao_add,
  fa_piao_del,
  fa_piao_edit,
} from "@/api/kai_piao/fa_piao_list";
import { get_userlist } from "@/api/user/get_list.js";
export default {
  name: "fapiao_list",
  data() {
    return {
      loading:false,
      fuze_name:'',
      options: [
        { label: "全部/挂接", value: -1 },
        { label: "未挂接", value: 0 },
        { label: "已挂接", value: 1 },
      ],
      options1:[],
      select_label: "全部/挂接",
      is_guajie: -1,
      table_loading: false,
      // 删除哪条的id
      del_id: "",
      // 编辑哪条的id
      edit_id: "",
      // 按钮loading
      fullscreenLoading: false,
      pickerOptions: {
        shortcuts: [
          {
            text: "最近一周",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit("pick", [start, end]);
            },
          },
          {
            text: "最近一个月",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
              picker.$emit("pick", [start, end]);
            },
          },
          {
            text: "最近三个月",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
              picker.$emit("pick", [start, end]);
            },
          },
        ],
      },
      // 初始化请求页数
      page: 1,
      // 初始化请求条数
      limit: 10,
      // 时间
      time: "",
      // 总条数
      count: 0,
      // 搜索关键字
      title: "",
      // 编辑和添加时回填的数据
      role: {
        company_name: "",
        price: "",
        invoice_num: "",
        statement_id: 0,
        invoice_time_str: "",
        company_num: "",
        company_tel: "",
        company_addr: "",
        invoice_type: "增值税专用发票",
        remark: "",
        market_person_uid:''
      },
      // 列表
      rolesList: [],
      // 控制添加编辑模态框
      dialogVisible: false,
      // 判断是编辑还是添加
      dialogType: "new",
      checkStrictly: false,
      defaultProps: {
        children: "children",
        label: "title",
      },
      // 表单验证
      rules: {
        company_name: [
          {
            required: true,
            message: "请输入公司名称",
            trigger: "blur",
          },
        ],
        price: [
          {
            required: true,
            message: "请输入发票金额",
            trigger: "blur",
          },
        ],
        invoice_num: [
          {
            required: true,
            message: "请输入发票编号",
            trigger: "blur",
          },
        ],
        invoice_time_str: [
          {
            required: true,
            message: "请输入开票时间",
            trigger: "blur",
          },
        ],
      },
    };
  },

  computed: {
    routesData() {
      return this.routes;
    },
  },
  created() {
    // this.getRoutes()
    // 初始化请求数据
    this.get_list();
  },
  methods: {
    focus(){
      get_userlist({ keyword: '' }).then((res) => {
        this.loading = false;
        this.options1 = res.data;
        console.log(res)
      });
    },
    tiao(id){
      this.$router.push({path:'/jiesuan/jiesuan_list/detail',query:{statement_id:id}},)
    },
    change(e){
      this.role.market_person_uid = e
    },
    // 下拉框选项变化
    select_change(e) {
      this.page = 1
      this.is_guajie = e;
      this.get_list(this.title,this.time);
    },
    // 刷新
    refresh() {
      this.title = "";
      this.time = "";
      this.page = 1;
      this.is_guajie = -1
      this.select_label = '全部/挂接'
      this.get_list();
    },
    // 编辑是时间选择框获取焦点
    time_focus() {
      this.role.invoice_time_str = "";
    },
    // 请求数据
    async get_list(keyword, search_time) {
      this.table_loading = true;
      const res = await fa_piao_luru({
        is_guajie: this.is_guajie,
        page: this.page,
        limit: this.limit,
        keyword: keyword ? keyword : "",
        search_time: search_time ? search_time.join(",") : "",
      });

      this.count = res.count;
      this.rolesList = res.data;
      this.table_loading = false;
    },
    // 点击添加按钮
    handleAddRole() {
      this.dialogType = "new";
      this.dialogVisible = true;
      this.role = {
        company_name: "",
        price: "",
        invoice_num: "",
        statement_id: 0,
        invoice_time_str: "",
        company_num: "",
        company_tel: "",
        company_addr: "",
        invoice_type: "增值税专用发票",
        remark: "",
        market_person_uid:''
      };
    },
    // 点击编辑按钮
    handleEdit(scope) {
      console.log(scope)
      this.fuze_name = scope.row.market_person_uid_str
      for (var key in this.role) {
        this.role[key] = scope.row[key];
      }
      this.edit_id = scope.row.id;
      this.role.invoice_id = scope.row.id;
      this.dialogType = "edit";
      this.dialogVisible = true;
    },
    // 删除事件
    handleDelete({ $index, row }) {
      this.$confirm("您是否要删除吗?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          this.del_id = row.id;
          fa_piao_del({ invoice_id: this.del_id })
            .then((res) => {
              if (res.code === 200) {
                this.$message({
                  type: "success",
                  message: res.msg,
                });
                this.get_list();
              } else {
                this.$message({
                  type: "warning",
                  message: res.msg,
                });
              }
            })
            .catch((err) => {
              console.log(err);
            });
        })
        .catch((err) => {});
    },

    // 添加.修改事件
    confirmRole() {
      this.fullscreenLoading = true;
      // 验证表单
      this.$refs.role.validate(async (value) => {
        // 如果没必填都填了
        if (value) {
          // 如果是new走新建
          if (this.dialogType === "new") {
            try {
              this.role.invoice_time = this.role.invoice_time_str;
              let res = await fa_piao_add(this.role);
              if (res && res.code === 200) {
                // 关了loading
                this.fullscreenLoading = false;
                this.$message({
                  type: "success",
                  message: res.msg,
                });
                // 关了loading
                this.dialogVisible = false;
                this.get_list();
              } else {
                // 如果没添加成功
                // 关了loading
                this.dialogVisible = false;
                this.fullscreenLoading = false;
                this.$message({
                  type: "warning",
                  message: res.msg,
                });
              }
            } catch {
              this.fullscreenLoading = false;
            }
          } else if (this.dialogType === "edit") {
            // 修改接口
            this.role.invoice_time = this.role.invoice_time_str;
            fa_piao_edit(this.role)
              .then((res) => {
                this.fullscreenLoading = false;
                this.dialogVisible = false;
                this.get_list();
                this.fuze_name = ''
                this.$message({
                  type: "success",
                  message: res.msg,
                });
              })
              .catch((err) => {
                this.fullscreenLoading = false;
                console.log(err);
              });
          }
        } else {
          this.fullscreenLoading = false;
        }
      });
    },

    // 搜索
    async search() {
      this.page = 1;
      this.get_list(this.title, this.time);
    },
    // 翻页
    current_change(e) {
      this.page = e;
      this.get_list(this.title, this.time);
    },
    // 一页显示多少条变化
    size_change(e) {
      this.limit = e;
      this.get_list(this.title, this.time);
    },
  },
};
</script>

<style scoped lang="scss" >
.app-container {
  .roles-table {
    margin-top: 30px;
  }

  .permission-tree {
    margin-bottom: 30px;
  }
}

.del {
  margin: 0;
}

.header {
  display: flex;
  justify-content: flex-start;
  align-items: center;
}
.search_input {
  width: 202px;
}
// 翻页组件居中
.pages {
  display: flex;
  padding-top: 20px;
}

.cao_zuo {
  display: flex;
  justify-content: space-around;
  width: 100%;
}
.search_time {
  width: 240px;
}
.el-dialog__header {
  text-align: center;
}
</style>
